/**
 * Created with Vim7.3 Mac
 * @fileOverview : 
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-08-15 11:28:20
 * @filename : src/components/myProfilePhoto.js
 * @version : 
 * @description : 
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';

import NetWorkImg from '../common/networkImg'
import PrivatePhoto from './privatePhoto'
import PublicPhoto from './publicPhoto'
import AddPublicPhoto from './addPublicPhoto'
import AddPrivatePhoto from './addPrivatePhoto'
let userObj;

class MyProfilePhoto extends Component {

    constructor(props) {
        super(props);
        SceneObj.MyProfilePhoto = this;
        Share.regResponder('photo','MyProfilePhoto');
        userObj = JSON.parse(Store.session_user_id);
        this.state = {};
    }

    responseRender(type) {
        //console.log('MyProfilePhoto');
        userObj = JSON.parse(Store.session_user_id);
        this.forceUpdate();
    }

    render() {
        return (
            <View style={styles.container}>
                {this.requestNotice()}
                <View style={styles.photo}>
                    <Text style={styles.photoTitle}>
	                   Public
	                </Text> 
	                <Text style={styles.photoText}>
	                    {this.getPhotoStatus('pictures')}
	                </Text> 
                </View>

                <View style={styles.boxPhoto}>
                    <TouchableOpacity  activeOpacity = {1} style={styles.boxPhotoTouch} onPress={()=>this.gotoAddPhoto()}>
                        <Image style={styles.photoSize} source={require('../img/photo_addicon.jpg')}/>
                    </TouchableOpacity> 

                    <TouchableOpacity  activeOpacity = {1} style={styles.boxPhotoTouch} onPress={()=>this.gotoPublicPhotoList()}>
                        {this.publicPhoto()}
                    </TouchableOpacity>

                    <TouchableOpacity  activeOpacity = {1} style={styles.boxArrowTocuch}>
                        <Image style={styles.photoArrow} source={require('../img/arrow_right.png')}/>
                    </TouchableOpacity>
                </View>     

                <View style={styles.photo}>
                    <Text style={styles.photoTitle}>
	                   Private
	                </Text> 
	                <Text style={styles.photoText}>
	                   {this.getPhotoStatus('private_pictures')}
	                </Text> 
                </View>

                <View style={styles.boxPhoto}>
                    <TouchableOpacity  activeOpacity = {1} style={styles.boxPhotoTouch} onPress={()=>this.gotoAddPrivatePhoto()} >
                        <Image style={styles.photoSize} source={require('../img/photo_addicon.jpg')}/>
                    </TouchableOpacity>
                    <TouchableOpacity  activeOpacity = {1} style={styles.boxPhotoTouch} onPress={()=>this.gotoPrivatePhotoList()}>
                        {this.privatePhoto()}
                    </TouchableOpacity>
                    <TouchableOpacity  activeOpacity = {1} style={styles.boxArrowTocuch}>
                        <Image style={styles.photoArrow} source={require('../img/arrow_right.png')}/>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }

    requestNotice() {
        let jsx = null;
        if(parseInt(userObj.private_album_request_num) > 0) { 
            jsx =   <View style={styles.tip}>
                        <Text style={styles.tipCenter}> {Lang.myProfilePhoto_photoNotice} </Text>  
                        <View style={styles.tipRed}><Text style={styles.tipRedText}> {userObj.private_album_request_num} </Text></View>
                    </View>
        } 
        return (jsx);
    } 

    publicPhoto() {
    	let photoList = userObj.pictures;
        return this.photoList(photoList);
    }

    privatePhoto() {
        let photoList = userObj.private_pictures;
        return this.photoList(photoList);
    }

    photoList(photoList) {
        let items = [],num=5;
        if (photoList && photoList.length > 0) {
            for (var i in photoList) {
                if (i <= 5) { 
                    items.push(
                        <NetWorkImg  key={i}
                            source={{uri:photoList[i].picture}} 
                            style={styles.photoSize}
                            loadSize={'small'}
                        />
                    )
                }

            }
        } else {
            items = null;
        }
        return items;
    }

    getPhotoStatus(type) {
        let str = '',complete = 0,pending = 0,
            arr = userObj[type];
            for (var i in arr) {
                if (parseInt(arr[i].active) == 1) {} else {
                    pending++;
                }
                complete++;
            }

        if (complete > 1) {
            str = "("+complete+"photos / "+pending+"pending)";
        } else {
            str = "("+complete+"photo / "+pending+"pending)";
        }
        return str;
    }

    gotoPublicPhotoList() {
        Utils.navJumpTo(this.props.navigator, { name: "Public Photo", component: PublicPhoto, title: 'Public Photo'});
    }

    gotoPrivatePhotoList() {
        Utils.navJumpTo(this.props.navigator, { name: "Private Photo", component: PrivatePhoto, title: 'Private Photo'});
    }
 
    gotoAddPhoto() {
         Utils.navJumpTo(this.props.navigator, { name: "Add Public Photo", component: AddPublicPhoto, title: 'Add Public Photo'},'left');
    }

    gotoAddPrivatePhoto() {
         Utils.navJumpTo(this.props.navigator, { name: "Add Private Photo", component: AddPrivatePhoto, title: 'Add Private Photo'},'left');
    }

}

const styles = StyleSheet.create({

    container: {
    	padding:10

    },

    tip: {
    	height:35,
    	borderWidth:1,
    	borderColor:'#56ade0',
    	backgroundColor:'#fff',
    	borderRadius:5,
    	overflow:'hidden',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
    },

    tipCenter: {
        textAlign:'center',
        color:'#56ade0',
        alignItems: 'center',
        justifyContent: 'center',
    },

    tipRed: {
        maxWidth:30,
        height:16,
        marginLeft:5,
        backgroundColor:'#f64747',
        borderRadius:6,
        padding:2,
        overflow:'hidden',
        alignItems: 'center',
        justifyContent: 'center',
    },

    tipRedText: {
        color:'#fff',
        fontSize:12,
    },

    photo: {
    	marginTop:10,
    	marginBottom:10,
    	flexDirection: 'row',
    	alignItems: 'center',
        //justifyContent: 'center',
    },

    photoTitle: {
    	color:'#000',
    	fontSize:14,
    },
  
    photoText: {
    	marginLeft:10,
    	color:'#999',
    	fontSize:12,
    },

    boxPhoto: {
    	height:80,
    	borderWidth:1,
    	borderColor:'#ccc',
    	backgroundColor:'#fff',
    	borderRadius:5,
    	overflow:'hidden',
    	flexDirection: 'row',
    	alignItems: 'center',
    },

    boxPhotoTouch: {
        flexDirection: 'row',
        alignItems: 'center',
        overflow:'hidden',
    },

    photoSize: {
    	width:65,
    	height:65,
    	marginLeft:5,
    },

    boxArrowTocuch: {
        position:'absolute',
        right:0,
        height:80,
        width:15,
        justifyContent: 'center',
        backgroundColor:'#fff',
    },

    photoArrow: {
        width:10,
        height:10,
    }


});

export default MyProfilePhoto;
